<template>
    <div class="user-list">
        <div class="search-part prize">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-radio-group v-model="radio" size="large">
                        <el-radio-button label="不设置提成" class="c-def"></el-radio-button>
                        <el-radio-button label="按员工设置" class="c-def"></el-radio-button>
                        <el-radio-button label="按职位设置" class="c-def"></el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content btns">
                        <el-button class="red-btn" @click="makeNewOne()"> 新 增 </el-button>
                        <el-button class="gray-btn" @click="del"> 删 除 </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div id="myDIV">
            <waterfall
                  :line-gap="220"
                  :max-line-gap="360"
                  :min-line-gap="220"
                  :fixed-height="true"
                  :watch="items"
                  align="center"
                    >
                <!-- each component is wrapped by a waterfall slot -->
                <waterfall-slot
                        v-for="(item, index) in items"
                        :width="200"
                        :height="245"
                        :order="index"
                        :key="item.id"
                        move-class="item-move"
                >
                    <v-usercomp
                            :item="item"
                            :index="index"
                            class="item"
                            :backSelectItems="selectItems"
                            :backItems="getCurrentSelectItems"
                            :viewClick="function(){info(item)}"
                            :buttonText="buttonText"
                            :isMutpart="true"
                    >

                        <div class="role">

                            <span :title="item.ownerName" v-if="item.ownerName">
                                {{item.ownerName}}
                              </span>
                            <span v-else-if="item.jobName">
                                {{item.jobName}}
                              </span>


                            <span>提成比:{{item.prizeValue}}%</span>
                        </div>

                    </v-usercomp>
                </waterfall-slot>
            </waterfall>
        </div>
    </div>

</template>

<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vUsercomp from '../../common/UserComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import * as type from '../../../store/types';
    export default {
        name: 'keepalive-false',
        components: {
            vUsercomp, Waterfall, WaterfallSlot, vSimpsearch
        },
        data: function () {
            return {
                radio: '',
                items: '',
                selectItems: new Array(),
                buttonText: '查看修改信息',
                currentUser:{},
            }
        },
        beforeMount: function () {
            this.$$("#content").scrollTop(0)
//                http://192.168.1.136:8081/shop/cfg/prize_type?organId=e07b4c82-a012-46ba-b099-0e8c4472b846&_=1494310668350
            let self = this;
            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
            let organId = this.currentUser.primaryOrganId;
//            console.log(organId)
            this.$axioxs.get('/cfg/prize_type?organId=' + organId)
                .then(function (res) {
                        console.log(res.data[0].value)
                        if (res.data[0].value === 'job') {
                            self.radio = '按职位设置'
                        }
                        if (res.data[0].value === 'user') {
                            self.radio = '按员工设置'
                        }
                        if (res.data[0].value === 'none') {
                            self.radio = '不设置提成'
                        }
                    },
                    (res) => {
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: res
                        });
                    })

        },
        watch: {
            radio(val){
                if (val === '按员工设置') {
                    this.selectItems=[];
                    let args = {
                        'key': 'prize_type',
                        'value': 'user',
                        'label': '按员工提成'
                    }
                    let self = this;
                    this.$axioxs.post('/cfg/', args)
                        .then(function (res) {
//                                self.$message({
//                                    showClose: true,
//                                    type: 'success',
//                                    message: "当前设置为 按员工提成 "
//                                });
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })

                    this.$axioxs.get("/user/prize/?states=1&_search=false&nd=1493281059439&rows=20&page=1&sidx=id&sord=desc&_=1493281034190")
                        .then(function (res) {
                                console.log(JSON.stringify(res.data));

                                self.items = res.data.records;
                                self.items.forEach(item => {
                                    item.prizeValue = item.prizeValue * 100
                                });
                                self.fullscreenLoading = false;
                                console.log(self.items)
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                }
                if (val === '按职位设置') {
                    this.selectItems=[];
                    let args = {
                        'key': 'prize_type',
                        'value': 'job',
                        'label': '按职位提成'
                    }
                    let self = this;
                    this.$axioxs.post('/cfg/', args)
                        .then(function (res) {
//                                self.$message({
//                                    showClose: true,
//                                    type: 'success',
//                                    message: "当前设置为 按职位提成"
//                                });
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })
                    this.$axioxs.get("/job_prize/")
                        .then(function (res) {

                                self.items = res.data.records;
                                self.items.forEach(item => {
                                    item.prizeValue = item.prizeValue * 100
                                });
                                self.fullscreenLoading = false;
                                console.log(self.items)
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                }
                if (val === '不设置提成') {
                    this.selectItems=[];
                    this.items = ''
                    let self = this;
                    let args = {
                        'key': 'prize_type',
                        'value': 'none',
                        'label': '不设置提成'
                    }
                    this.$axioxs.post('/cfg/', args)
                        .then(function (res) {
//                                self.$message({
//                                    showClose: true,
//                                    type: 'success',
//                                    message: "当前设置为 不设置提成"
//                                });
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })

                }
            }
        },
        methods: {
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                // alert(JSON.stringify(items.length))
            },
            makeNewOne(){
              let hasRights = this.currentUser.rights.find(obj=> obj === 'prize_add')
              if(hasRights != 'prize_add'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
              this.info();
            },
            info: function (item) {
              let hasRights = this.currentUser.rights.find(obj=> obj === 'prize_edit')
              if(hasRights != 'prize_edit'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                if (this.radio == '按员工设置') {
                    this.$router.push({
                        name: '',
                        path: '/toEmployeeSet',
                        query: {formMember: item}
                    });
                }
                if (this.radio == '按职位设置') {
                    this.$router.push({
                        name: '',
                        path: '/toPositionSet',
                        query: {formMember: item}
                    });
                }

            },
            del() {
              let hasRights = this.currentUser.rights.find(obj=> obj === 'prize_del')
              if(hasRights != 'prize_del'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                if (this.radio == '按员工设置' ) {
                    let self = this;
                    this.selectItems.forEach(item => {
                        self.$axioxs.delete("/user/prize/" + item.id)
                            .then(function () {
//                                    self.$set(self.list, self.items.indexOf(item), false);
                                    self.items.splice(self.items.indexOf(item), 1)
                                    self.selectItems.splice(self.selectItems.indexOf(item), 1)
                                },
                                (res) => {
                                    self.$message({
                                        showClose: true,
                                        type: 'error',
                                        message: res
                                    });
                                })
                    });
                } else if (this.radio == '按职位设置') {
                    let self = this;
                    this.selectItems.forEach(item => {
                        self.$axioxs.delete("/job_prize/" + item.id)
                            .then(function () {
//                                    self.$set(self.list, self.items.indexOf(item), false);
                                    self.items.splice(self.items.indexOf(item), 1)
                                    self.selectItems.splice(self.selectItems.indexOf(item), 1)
                                },
                                (res) => {
                                    self.$message({
                                        showClose: true,
                                        type: 'error',
                                        message: res
                                    });
                                })
                    });
                }
            }
        }
    }
</script>
<style scoped>
    .percentage-layout input[type=checkbox] {
        display: inline-block;
    }

    .percentage-layout input[type=radio] {
        display: inline-block;
    }

    .content a:not(.button):visited {
        color: #333;
    }

    .percentage-layout .checkbox, .radio {
        line-height: 70px;
    }

    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    #myDIV {
        padding-top: 80px;
    }

    .simple-search .el-input__inner {
        border-radius: 20px;
    }

    .search-part {
        width: 100%;
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }

    .el-radio-button--large .el-radio-button__inner{
      font-size: 14px !important;
    }

    .role span{
      display: block;
    }
    .c-def{
        cursor: default;
    }
</style>
